<template>
  <el-card class="noticeHome">
    <el-card class="noticeHomeHeader">
      <p v-if="isManage">
        <router-link to="/portal/notice/pushNotice">发布公告</router-link>
      </p>
    </el-card>
    <el-card class="notice-body">
      <!--  获取公告首页置顶列表  -->
      <span>重要公告！！！</span>
      <div class="importantNotice">
        <p class="notice-list" v-for="item in noticeList.slice(0,4)" :key="item.noticeNumber">
          <router-link to="" @click="getNoticeDetails(item.noticeNumber)"><span>{{item.title}}</span><span> [{{item.releaseDate.split('T')[0]}}]</span></router-link>
        </p>
      </div>
      <div class="lines"></div>
      <div class="normalNotice">
        <p class="notice-list" v-for="item in noticeList.slice(0,10)" :key="item.noticeNumber">
          <router-link to="" @click="getNoticeDetails(item.noticeNumber)"><span>{{item.title}}</span><span> [{{item.releaseDate.split('T')[0]}}]</span></router-link>
        </p>
      </div>
      <!--  分页组件  -->
      <v-pagination
          :pagesize="pageParam.size"
          :total="pageTotal"
          :options="pageParam"
          :render="getNoticeList"
      >
      </v-pagination>
    </el-card>
  </el-card>
</template>

<script>
import { queryNoticeList } from '@/services/index/notice/notice'
import vPagination from '@/components/pagination/Pagination'
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: 'Notice',
  components: {
    vPagination
  },
  data () {
    return {
      isManage: true,
      noticeList: [],
      pageParam: { // 配置对应的查询参数
        appTimeStart: '',
        appTimeEnd: '',
        page: 1,
        size: 10 // page第几页,limit是一页几个
      },
      pageTotal: 0
    }
  },
  created () {
    this.getNoticeList()
  },
  methods: {
    getNoticeList () {
      const dataForm = {
        page: this.pageParam.page,
        pageSize: this.pageParam.size
      }
      const data = JSON.stringify(dataForm)
      queryNoticeList(data).then((res) => {
        if (res.code !== 10000) {
          this.$message.error('公告突然全部消失了呢！')
        }
        this.noticeList = res.data.responseBody
        this.pageTotal = res.data.pageTotal
      })
    },
    getNoticeDetails (noticeNumber) {
      this.$router.push({
        name: 'NoticeDetails',
        params: {
          noticeNumber: noticeNumber
        }
      })
    }
  }
}
</script>

<style scoped lang="less">
@import "noticeHome.less";
</style>
